<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <meta name='layout' content='main'/>
    <title>Perfil Usuario</title>
    <r:script>
        jQuery(function () {
            jQuery("#slider").slider({
                range:"max",
                min:1,
                max:5,
                value:1,
                slide:function (event, ui) {
                    jQuery("#puntaje").val(ui.value);
                }
            });
            jQuery("#puntaje").val(jQuery("#slider").slider("value"));
        });
    </r:script>
    <style type="text/css">
    #slider {
        margin-top: 10px;
        width: 100px;
    }

    #slider .ui-slider-range {
        background: #729fcf;
    }

    #slider .ui-slider-handle {
        border-color: #729fcf;
    }
    </style>
    <r:script>
        var $ = jQuery;
        $(document).ready(function () {
            $('.bxslider').bxSlider({
                minSlides:2,
                maxSlides:2,
                slideWidth:60,
                slideMargin:10,
                infiniteLoop:false,
                hideControlOnEnd:true,
                moveSlides:1
            });
        });
    </r:script>
</head>

<body>

<div align="center">
    <table cellspacing="0" width="800px" align="center">
        <tr>
            <td align="left">
                <div class="single">
                    <a href="${createLink(controller: 'image', action: 'fotoPrincipalPersona', id: persona?.id)}"
                       rel="lightbox">
                        <img src="${createLink(controller: 'image', action: 'fotoPrincipalPersona', id: persona?.id)}"
                             width="150px" align="center"
                             height="150px" alt="Pepito"/>
                    </a>
                </div>
                <br>

                <div align="left"
                     style="overflow: scroll;overflow-x: hidden;overflow-y: hidden;white-space: nowrap; width: 180px; height: 120px">
                    <ul class="bxslider">
                        <g:each in="${persona?.getFotosNoPrincipal()}" var="foto">
                            <li>
                                <div class="single">
                                    <a href="${createLink(controller: 'image', action: 'foto', params: [fotoId: foto.id, personaId: persona?.id])}"
                                       rel="lightbox[galeria]">
                                        <img src="${createLink(controller: 'image', action: 'foto', params: [fotoId: foto.id, personaId: persona?.id])}"
                                             width="60px" height="60px" name='${foto.id}'/>
                                    </a>
                                </div>
                            </li>
                        </g:each>
                    </ul>
                    %{--<g:each in="${persona?.getFotosNoPrincipal()}" var="foto">--}%
                    %{--<div class="single">--}%
                    %{--<a href="${createLink(controller: 'image', action: 'foto', params: [fotoId: foto.id, personaId: persona?.id])}" rel="lightbox[galeria]">--}%
                    %{--<img src="${createLink(controller: 'image', action: 'foto', params: [fotoId: foto.id, personaId: persona?.id])}"--}%
                    %{--width="60px" height="60px" name='${foto.id}'--}%
                    %{--onmouseover=" ${foto.id}.width = '300';--}%
                    %{--${foto.id}.height = '200';"--}%
                    %{--onmouseout=" ${foto.id}.width = '60';--}%
                    %{--${foto.id}.height = '60';"/>--}%
                    %{--</a>--}%
                    %{--</div>--}%
                    %{--</g:each>--}%
                </div>
            </td>
            <td align="left">
                <b>${persona.nombre} ${persona.apellido}</b>
                <br/>
                <g:each in="${1..5}" var="contador">
                    <g:set var="onOff" value="off"/>
                    <g:if test='${contador <= persona?.getReputacion()}'>
                        <g:set var="onOff" value="on"/>
                    </g:if>
                    <img src="${createLinkTo(dir: 'images/icons/', file: 'rating_icon_' + onOff + '.png')}"
                         alt="Rating"/>
                </g:each>
            </td>
            <td align="right">
                <div align="left" style="margin-left: 50%">
                    <g:link controller="perfilPrivado" action="indexSolicitudesPendientes" style="color: #ffffff;">
                        <input type="submit" class="button" value="Solicitudes Pendientes"
                               style="line-break: auto;font-size: 12px;width: 200px;text-align: center">
                    </g:link>
                    <br>
                    <br>
                    <g:link controller="perfilPrivado" action="indexEntrenate" style="color: #ffffff;">
                        <input type="submit" class="button" value="Entrenate"
                               style="line-break: auto;font-size: 12px;width: 200px;text-align: center">
                    </g:link>
                    <br>
                    <br>
                    <g:link controller="perfilPrivado" action="cargarFotos">
                        <input type="submit" class="button" value="Mis fotos"
                               style="line-break: auto;font-size: 12px;width: 200px;text-align: center">
                    </g:link>
                </div>
            </td>
        </tr>
    </table>
</div>
<br>

<g:if test="${persona?.getConversaciones()?.size() > 0}">
    <div align="center">
        <hr noshade width="90%" align="center">
    </div>

    <br>

    <div align="center">
        <table cellspacing="0" border="1" width="800">
            <tr>
                <th colspan="4" bgcolor="gray" style="color: #ffffff;text-align: left">
                    Conversaciones
                </th>
            </tr>
            <g:each status="i" in="${persona?.getConversaciones()}" var="conversacion">
                <tr>
                    <td width="15px">
                        <img
                                src="${createLink(controller: 'image', action: 'fotoPrincipalPersona', id: conversacion?.segundaPersona?.id)}"
                                width="75px"
                                height="75px" alt="Persona"/>

                    </td>
                    <td width="200px" align="center"><b><a
                            href="${createLink(controller: 'perfilPublico', action: 'perfilPublicoUsuario', id: conversacion?.segundaPersona?.id)}"
                            style="color: #000000">
                        ${conversacion?.segundaPersona?.fullName}
                    </a></b></td>
                    <td align="center">
                        <div style="padding-left: 6px">
                            ${conversacion?.lastMesaje()}
                        </div>
                    </td>
                    <td width="100px" align="center">
                        <a href="${createLink(controller: 'conversacion', action: 'show', id: conversacion?.id)}"
                           style="color: #000000">
                            <b>Responder</b>
                        </a>
                    </td>
                </tr>

            </g:each>

        </table>

    </div>
    <br>
</g:if>

<div align="center">
    <hr noshade width="90%" align="center">
</div>
<br>

<div align="center">
    <table cellspacing="0" border="1" width="800">
        <tr>
            <th colspan="1" bgcolor="gray" style="color: #ffffff;text-align: left">
                Personas recomendadas
            </th>
        </tr>
        <g:each in="${personasRecomendadas}" var="persona">
            <tr>
                <td width="100px" align="left">
                    <b>
                        <a href="${createLink(controller: 'perfilPublico', action: 'perfilPublicoUsuario', id: persona?.id)}"
                           style="color: #000000">
                            ${fieldValue(bean: persona, field: "apellido")} ${fieldValue(bean: persona, field: "nombre")}
                        </a>
                    </b>
                </td>
            </tr>
        </g:each>
    </table>
</div>

<div align="center">
    <g:link controller="busqueda" action="index">
        <input type="submit" class="button" value="Buscar Personas">
    </g:link>
</div>

</body>
</html>